<template>
	<el-row class="login">
		<el-col :sm="8" :md="8" :lg="8" :xl="8" :offset="8">
			<el-card shadow="hover" class="login-container">
				<el-form :model="form" :rules="rules" ref="form">
					<h1>{{ projectName }}</h1>
					<p class="hidden-md-and-down">
						—— 低代码快速开发框架
					</p>
					<el-form-item label="用户名" prop="username">
						<el-input 
							placeholder="请输入用户名" 
							prefix-icon="el-icon-user"
							v-model="form.username" 
							maxlength="10">
						</el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password" style="margin-bottom: 0;">
						<el-input 
							type="password" 
							prefix-icon="el-icon-lock"
							v-model="form.password" 
							show-password
							@keyup.enter.native="submitForm('form')">
						</el-input>
					</el-form-item>
					<el-form-item style="text-align: right;margin-bottom: 10px;">
						<el-checkbox v-model="rememberMe">记住我</el-checkbox>
					</el-form-item>
					<el-button type="primary" plain style="width: 100%;" @click="submitForm('form')">
						立即登录
					</el-button>
				</el-form>
				<el-row type="flex" class="row-bg" justify="space-around">
					<el-col :sm="6" :md="6">
						<el-button type="danger" round>
							创建账号
						</el-button>
					</el-col>
					<el-col :sm="6" :md="6">
						<el-button round>
							忘记密码
						</el-button>
					</el-col>
					<el-col :sm="6" :md="6" class="hidden-md-and-down">
						<el-link href="https://gitee.com/aria_wai/momo-auth" target="_blank" :underline="false">
							<el-button round>
								关于我们
							</el-button>
						</el-link>
					</el-col>
				</el-row>
				<div class="contact hidden-md-and-down">
					有些人死了，但他还活着；有些人活着，但他已经死了。
				</div>
			</el-card>
		</el-col>
		<vue-particles
			color="#66b1ff"
			:particleOpacity="0.7"
			:particlesNumber="80"
			shapeType="circle"
			:particleSize="4"
			linesColor="#66b1ff"
			:linesWidth="1"
			:lineLinked="true"
			:lineOpacity="0.4"
			:linesDistance="150"
			:moveSpeed="3"
			:hoverEffect="true"
			hoverMode="grab"
			:clickEffect="true"
			clickMode="push">
		</vue-particles>
	</el-row>
</template>

<script>
	import { toLogin } from '@/api/login.js'
	import { setToken,
			 setUsername,
			 setRoleList,
			 getLogin_remember,
			 setLogin_remember,
			 removeLogin_remember,
			 getLogin_user,
			 setLogin_user,
			 removeLogin_user,
			 removeAll } from '../../utils/permission'
	export default {
		name: "Login",
		data() {
			return {
				form: {
					username: '',
					password: ''
				},
				rules: {
					username: [
						{ required: true, message: '请输入用户名', trigger: ['blur', 'change'] }
					],
					password: [
						{ required: true, message: '请输入密码', trigger: ['blur', 'change'] }
					],
				},
				rememberMe: false
			}
		},
		mounted() {
			// 记住我
			if (getLogin_remember()) {
				this.rememberMe = true;
				this.form = JSON.parse(getLogin_user());
			}
		},
		methods: {
			// 消息通知
			showMsg(realName) {
				this.$notify({
					title: '提示',
					dangerouslyUseHTMLString: true,
					message: '尊敬的<strong>' + realName + '</strong>，欢迎回来。',
					type: 'success',
					duration: 2000
				});
			},
			// 登录请求
			submitForm(form) {
				this.$refs[form].validate((valid) => {
					if (valid) {
						let _this = this;
						toLogin(_this.form).then((res) => {
							removeAll(); //清除所有本地缓存
							if (res.code === 200) {
								setToken(res.data.token);
								setUsername(res.data.username);
								setRoleList(JSON.stringify(res.data.user_roleList));
								// 保存用户信息
								if (_this.rememberMe) {
									setLogin_remember(
										location.host 
										+ "/isChecked:" 
										+ _this.rememberMe
									);
									setLogin_user(JSON.stringify(_this.form));
								} else {
									removeLogin_remember();
									removeLogin_user();
								}
								_this.showMsg(res.data.username);
								_this.$router.push("/");
							} else {
								_this.$message.error(res.msg);
							}
						}).catch((err)=>{
							console.log(err);
						})
					}
				});
			}
		}
	}
</script>

<style type="text/css">
	@import url("../../assets/style/login.css");
</style>
